<template>
    <section ref="sections" style=" margin-bottom: 52px;" v-if="songs[0]">
        <div id="title"><img :src="imgurl" alt=""></div>
        <ul class="mui-table-view" id="list">
            <li class="mui-table-view-cell mui-media" v-for="(v,i) in songs" :key="i">
                <a href="javascript:;" @click='play(v)'>
                    <img class="mui-media-object mui-pull-right" src="../assets/images/play.png">
                    <div class="mui-media-body">{{v.filename}}
                        <p class="mui-ellipsis">{{v.singername}}</p>
                    </div>
                </a>
            </li>
        </ul>
    </section>
</template>
<script>
export default {
    data() {
        return {
            id: '',
            name: '',
            songs: '',
            imgurl: ''
        }
    },
    created() {
        var that = this;
        var formdata = new FormData();
        console.log(that.$route.query)
        that.name = decodeURIComponent(that.$route.query.name);
        // that.imgurl = decodeURIComponent(that.$route.query.mg);
        formdata.append('rankid', that.$route.query.id)
        that.$http({
            url: '/RankingPage',
            method: 'post',
            data: formdata,
        }).then((res) => {
            console.log(res.data)
            that.imgurl = res.data.info.banner7url.replace('{size}','400');
            that.songs = res.data.songs.list;
            if (that.songs[0]) {
            } else {
                setTimeout(function() {
                    mui.toast('sorry,没有请求到数据！', { duration: 'short', type: 'div' })
                    that.$router.push('/ranking')
                }, 700);
            }
        }).catch((err) => {
            console.log(err);
            that.$router.push('/ranking')
        })
    },
    methods: {
        play(v) {
            var that = this;
            var formdata = new FormData();
            formdata.append('hash', v.hash)
            that.$http({
                url: '/SongInfo',
                method: 'post',
                data: formdata,
            }).then((res) => {
                that.songInfo = res.data.data;
                console.log('RankingPage: ', res.data);
                this.$store.dispatch('emitHash', res.data.data)
            })
        }
    }
}
</script>
<style scoped>
#title img {
    /* position: fixed; */
    width: 100%;
    height: 200px;
    /* z-index: 1; */
}

#title {
    position: relative;
    height: 200px;
    left: 0;
    right: 0;
    background-color: #fff;
}

#list,
#list li,
#list li a,
.mui-table-view:before,
.mui-table-view-cell:after,
.mui-table-view:after {
    background-color: transparent;
    border: 0px;
}

#list {
    background-color: transparent;
    padding: 10px;
}

#list li {
    padding-left: 8px;
}

#list li img {
    width: 27px;
    height: 27px;
}
</style>

